<template>
    <view :class="$style.page">
        <view :class="$style.abc">


            <PageHeader>
                <view class="PAGE_TITLE">服务中心</view>
            </PageHeader>
            <view :class="$style.pageWrap">
                <view class="p-l-r">
                    <view :class="$style.statistics">
                        <view :class="$style.total">
                            <view :class="$style.name">服务总数</view>
                            <view :class="$style.num">{{ formatVisitNumber(statisticsData.appCount) }}</view>
                        </view>
                        <view :class="$style.blank"></view>
                        <view :class="$style.items">
                            <view :class="$style.item">
                                <view :class="$style.name">访问人数</view>
                                <view :class="$style.num">{{ formatVisitNumber(statisticsData.uniqueVisitors) }}</view>
                            </view>
                            <view :class="$style.item">
                                <view :class="$style.name">访问次数</view>
                                <view :class="$style.num">{{ formatVisitNumber(statisticsData.visitTimes) }}</view>
                            </view>
                            <view :class="$style.item">
                                <view :class="$style.name">访问人次</view>
                                <view :class="$style.num">{{ formatVisitNumber(statisticsData.visitors) }}</view>
                            </view>
                        </view>
                    </view>
                </view>

                <view :class="$style.tabs">
                    <view v-for="(item, index) in categories" :key="item.id" :class="$style.tab" @tap="toggleCategory(0, index)">
                        <view :class="[$style.title, index == selectedIndex[0] ? $style.selected : '']">
                            {{ item.name }}
                        </view>
                    </view>
                </view>

                <view :class="$style.wrap">
                    <view :class="$style.mounte">
                        <view :class="$style.categorys">
                            <view :class="$style.left" v-if="categories[selectedIndex[0]].children && categories[selectedIndex[0]].children && categories[selectedIndex[0]].children.length > 0">
                                <view :class="$style._wrap">
                                    <template v-if="categories.length > 0">
                                        <template v-for="(item, index) in categories[selectedIndex[0]].children">
                                            <view :class="[$style.item, index == selectedIndex[1] ? $style.selected : '']" @click="toggleCategory(1, index)">{{ item.name }}</view>
                                        </template>
                                        
                                    </template>
                                </view>
                            </view>
                            <view :class="$style.right">
                                <view :class="$style._wrap" v-if="apps.length > 0">
                                    <view :class="$style.currentCategory" v-if="categories[selectedIndex[0]].children && categories[selectedIndex[0]].children.length > 0">
                                        <view :class="$style.name">{{ categories[selectedIndex[0]].children[selectedIndex[1]].name }}</view>
                                        <view :class="$style.count">{{ categories[selectedIndex[0]].children[selectedIndex[1]].apps ? categories[selectedIndex[0]].children[selectedIndex[1]].apps.length : 0}}个</view>
                                    </view>
                                    <view class="m-t-20" :class="$style.items">
                                        <template v-if="apps.length > 0">
                                            <template v-for="item in apps">
                                                <AppLink :class="$style.item" :url="item.url" :id="item.id" :link-type="item.linkType" :qr="item.qr">
                                                    <AppIcon :class="$style.icon" :type="item.coverType" :icon="item.cover" :color="item.bccolor" />
                                                    <view :class="$style.content">
                                                        <view :class="$style.name">{{ item.name }}</view>
                                                        <view :class="$style.count">访问次数:{{ formatVisitNumber(item.visitTimes) }}</view>
                                                    </view>
                                                    <view :class="$style.arrow">
                                                        <uni-icons type="right" color="#90A3BF" size="12"></uni-icons>
                                                    </view>
                                                </AppLink>
                                            </template>
                                        </template>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>



        </view>

        <TabBar />
    </view>



    <AppQr />
</template>

<script lang="ts" setup>
import AppLink from '@/components/AppLink.vue'
    import AppIcon from '@/components/AppIcon.vue'
import PageHeader from '@/components/PageHeader.vue'
    import TabBar from '@/TabBar/index.vue'
    import { appCategoryApi, queryAppsApi, queryHistoryAppsApi } from '@/api/Apps';
    import { recursionFn } from '@/utils';
    import { onUnmounted, ref } from 'vue';
    import { formatVisitNumber } from '@/utils'
import AppQr from '@/components/AppQr.vue'


    const staticUrl = import.meta.env.B_NET_STATIC_URL


    const statisticsData = ref({
        appCount : 0,
        visitTimes : 0,
        uniqueVisitors : 0,
        visitors : 0
    })
    const selectedIndex = ref<number[]>([0, 0])
    

    const categories = ref<any[]>([])
    const apps = ref<any[]>([])

    appCategoryApi().then(r => {
        if(r.data) {
            categories.value = recursionFn(r.data, 0, 'id', 'parentId', 'children')
            categories.value.forEach(item => {
                if(item.historyId) {
                    item.children.unshift({
                        id : 0,
                        name : '推荐服务'
                    })
                }
            })
            toggleCategory(0, 0)
        }
    })

    function toggleCategory(index:number, i:number) {
        if(index == 0) {
            statisticsData.value.appCount = categories.value[i].appCount
            statisticsData.value.visitTimes = categories.value[i].visitTimes
            statisticsData.value.uniqueVisitors = categories.value[i].uniqueVisitors
            statisticsData.value.visitors = categories.value[i].visitors
        }
        


        selectedIndex.value[index] = i
        queryApp()
    }

    function queryApp() {
        const topcate = categories.value[selectedIndex.value[0]]
        let target = topcate.children && topcate.children.length > 0 ? topcate.children[selectedIndex.value[1]] : topcate
        apps.value.splice(0)
        if(target.apps) {
            apps.value = [...target.apps]
        }else {
            uni.showLoading()

            if(target.id == 0) {
                queryHistoryAppsApi(topcate.historyId).then(res => {
                    uni.hideLoading()
                    target.apps = res.data || []
                    apps.value = [...target.apps]
                }) 
            }else {
                queryAppsApi(target.id).then(res => {
                    uni.hideLoading()
                    target.apps = res.data || []
                    apps.value = [...target.apps]
                })
            }

            
        }
    }

    onUnmounted(() => {
        categories.value = []
    })
</script>

<style lang="scss" module src="./index.scss"></style>